/*
    loader: 1.下载     2.使用（配置 loader）
    plugins: 
        1.下载: npm i html-webpack-plugin -D
        2.引入: const HtmlWebpackPlugin = require('html-webpack-plugin');
        3.使用: new HtmlWebpackPlugin() ,可以添加结构模板
*/ 

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',

    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },

    module: {
        rules: [
            // loader 配置
        ]
    },

    plugins: [
        // plugin 配置
        // html-webpack-plugin
        // 功能：默认创建一个空的HMTL，自动引入打包输出的所有资源 (JS/CSS)，默认是创建没有结构 HTML 文件
        // new HtmlWebpackPlugin()

        // 需求：需要有结构的 HTML 文件
        new HtmlWebpackPlugin({
            // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS），就是复制那个文件，并加入需要的资源，生成到build
            template: './src/index.html'
        })
    ], 

    mode: 'development'
}